<template>
  <header id="header"
    class="header site-header header-v3 sticky-display-top megamenu-fullwidth megamenu-column-animation"
    :class="{ 'fixed': navBarFixed }">
    <div class="header-main header-section logo-center">
      <div class="header-contents container">
        <div class="header-left-items header-items">
          <div class="hamburger-menu">
            <button class="menu-toggle fullscreen-toggle" @click="toggleMenu">
              <span class="bars">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-menu">
                  <line x1="3" y1="12" x2="21" y2="12"></line>
                  <line x1="3" y1="6" x2="21" y2="6"></line>
                  <line x1="3" y1="18" x2="21" y2="18"></line>
                </svg>
              </span>
              <span class="name">Menu</span>
            </button>
          </div>
         <a href="javascript:void(0)" class="quick_search icon popup-1 search-header_icon" @click="submit">
            <span class="text">Cerca</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="feather feather-search">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </a>
        </div>
        <div class="header-center-items header-items">
          <div class="logo-holder">
            <a href="/" rel="home" class="logolink">
              <img src="../assets/images/cropped-LOGO-NERO-DIM.-ORIGINALI-1-e1616512740650-11.png"
                class="skip-lazy logoimg bg--light">
              <img src="../assets/images/LOGO-DIM.-ORIGINALI1.png" class="skip-lazy logoimg bg--dark">
            </a>
          </div>
        </div>
        <div class="header-right-items header-items">
          <nuxt-link :to="{ path: '/users/order_list?orderStatus=1' }" class="orders">{{ $t(`page.user.myOrder`) }}

           </nuxt-link>
           <el-dropdown>
             <div class="code">
               <span class="iconfont icon-yuyanqiehuan"></span>
             </div>
             <el-dropdown-menu slot="dropdown">
               <template v-for="(item, index) in langList">
                 <el-dropdown-item v-for="(items, idx) in item.intro" :key="idx" @click.native="languagelTab(items)">
                   {{ $t(`userDrawer.language[${idx}].name`) }}
                 </el-dropdown-item>
               </template>
             </el-dropdown-menu>
           </el-dropdown>
            <nuxt-link to="/order/shopping_cart" class="cartNum">


            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="feather feather-shopping-bag">
              <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
              <line x1="3" y1="6" x2="21" y2="6"></line>
              <path d="M16 10a4 4 0 0 1-8 0"></path>
            </svg>
            <span class="item-counter minicart-counter et-count-zero">{{ cartCount }}</span>

          </nuxt-link>
        </div>
      </div>
    </div>
    <div class="header-mobile logo-center">
      <div class="header-contents container">
        <div class="hamburger-menu">
          <button class="menu-toggle mobile-toggle" data-target="fullscreen-menu" @click="toggleMenu">
            <span class="bars">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-menu">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
              </svg>
            </span>
            <span class="name">Menu</span>
          </button>
        </div>
        <div class="logo-holder">
          <a href="/" rel="home" class="logolink">

            <img src="../assets/images/cropped-LOGO-NERO-DIM.-ORIGINALI-1-e1616512740650-11.png"
                class="skip-lazy logoimg bg--light">
              <img src="../assets/images/LOGO-DIM.-ORIGINALI1.png" class="skip-lazy logoimg bg--dark">

          </a>
        </div>
        <div class="mobile-header-icons">
           <nuxt-link to="/order/shopping_cart" class="cartNum">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="feather feather-shopping-bag">
              <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
              <line x1="3" y1="6" x2="21" y2="6"></line>
              <path d="M16 10a4 4 0 0 1-8 0"></path>
            </svg>
            <span class="item-counter minicart-counter et-count-zero">{{ cartCount }}</span>
          </nuxt-link>
        </div>
      </div>

    </div>
    <div class="header-spacer" v-show="navBarFixed"></div>

    <nav id="fullscreen-menu" class="side-panel side-menu side-fullscreen-menu light no-bar">
      <header>
        <div class="container">
          <div class="panel-header-inner">
            <a href="javascript:void(0)" class="et-close" @click.prevent="toggleMenu"></a>
          </div>
        </div>
      </header>
      <div class="side-panel-content custom_scroll">
        <div class="container">
          <ul class="menu-list">
            <!-- 分类菜单 -->
            <li v-for="menu in $store.state.productClassify" :key="menu.id" class="menu-item"
              :class="{ 'active': $route.query.cid == menu.id, 'has-children': menu.childList && menu.childList.length > 0 }">
              <div class="menu-item-header">
                <a href="javascript:void(0)" @click="menu.childList && menu.childList.length > 0 ? null : goCate(menu)">
                  {{ menu.name }}
                </a>
                <span class="menu-toggle" v-if="menu.childList && menu.childList.length > 0"
                  @click="toggleSubMenu($event)">
                  <i class="toggle-icon"></i>
                </span>
              </div>
             <!-- 二级菜单 -->
              <ul class="submenu show-submenu" v-if="menu.childList && menu.childList.length > 0">
                <li v-for="subMenu in menu.childList" :key="subMenu.id" class="submenu-item"
                  :class="{ 'has-children': subMenu.childList && subMenu.childList.length > 0 }">
                  <div class="menu-item-header">
                    <a href="javascript:void(0)" @click="goCate(subMenu)">
                      {{ subMenu.name }}
                    </a>
                  </div>
                  
                  <!-- 三级菜单 - 直接显示，不需要点击二级菜单 -->
                  <ul class="submenu show-submenu third-level" v-if="subMenu.childList && subMenu.childList.length > 0">
                    <li v-for="thirdMenu in subMenu.childList" :key="thirdMenu.id" class="submenu-item">
                      <div class="menu-item-header">
                        <a href="javascript:void(0)" @click="goCate(thirdMenu)" style="padding-left: 20px;">
                          {{ thirdMenu.name }}
                        </a>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>

            <!-- 用户菜单 -->
            <li class="menu-item has-children">
              <div class="menu-item-header">
                <a href="javascript:void(0)">
                  {{ $t('page.users.userInfo.personalCenter') }}
                </a>
                <span class="menu-toggle" @click="toggleSubMenu($event)">
                  <i class="toggle-icon"></i>
                </span>
              </div>
              <ul class="submenu">
                <li v-for="menu in userMenu" :key="menu.id" class="submenu-item">
                  <a href="javascript:void(0)" @click="goPage(menu)">
                    {{ menu.name }}
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>




</template>
<script>
// import VueI18n from 'vue-i18n';
// const i18n = new VueI18n();
import { configMap } from '@/utils/validate.js'
export default {
  name: "headers",
  mixins: [],
  data() {
    return {
      // logoUrl: '',
      categoryCurrent: [],
      langList: [
        {
          name: '语言',
          current: 1,
          intro: ['en', 'it']
        }
      ],
      menus: [],
      seen: false,
      hide: false,
      navBarFixed: false,
      headerList: [],
      search: "",
      userInfo: {},
      showCode: false,
      hotSearchList: [],
      searchList: [],
      list: [],
      dialogVisible: false,
      current: 1,
      info: '',
      isShow: true,
      appidNum: '',
      cartCount: 0,
      menuOpen: false,
      hosts: '',
      fromPath: '',
      disabled: false,
      defaultPic: require("../assets/images/morentou.png"),
      cid: null,
      userMenu: [
        {
          id: 111,
          name: this.$t(`page.user.myOrder`),
          pc_url: '/users/order_list?orderStatus=1'
        },
        {
          id: 222,
          name: this.$t(`page.users.goodsReturn.refundList`),
          pc_url: '/users/refund_list'
        },
        {
          id: 333,
          name: this.$t(`page.users.replyList.navTitle`),
          pc_url: '/users/evaluation_list'
        }
      ]
    }
  },
  computed: configMap(['logoUrl']),
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        this.search = newVal.query.title ? newVal.query.title : '';
      },
      // 深度观察监听
      deep: true
    }
  },
  head() {
    if (this.$route.path == '/') {
      this.hide = true;
      this.navBarFixed = false;
    } else {
      this.hide = false;
    }
    if (this.$auth.loggedIn) {
      this.getMenus();
      this.carCount();
    }
    return {
      title: this.$store.state.titleCon
    }
  },
  beforeMount() {
    if (this.$auth.loggedIn) {
      this.getMenus();
      this.carCount();
    }
    if (!localStorage.getItem('homeDataPc')) {
      this.getHomeIndex()
    }
    this.getHotSearchList();
    this.$store.dispatch('getProductClassify')
    // this.getLogoUrl()
  },
  mounted() {
    this.cartCount = 0;
    window.addEventListener('keydown', this.keyDown);
    this.hosts = location.origin + location.pathname;
    this.fromPath = this.$cookies.get("fromPath");
    window.addEventListener("scroll", this.watchScroll);
    this.getHomeIndex()
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false);
  },
  methods: {
    toggleMenu() {
      this.menuOpen = !this.menuOpen;
      const fullscreenMenu = document.getElementById('fullscreen-menu');
      if (!fullscreenMenu) return; // 防止元素不存在

      if (this.menuOpen) {
        document.body.style.overflow = 'hidden';
        // 显示菜单
        fullscreenMenu.style.opacity = '1';
        fullscreenMenu.style.transform = 'translateX(0%)';
        fullscreenMenu.style.visibility = 'visible';
      } else {
        document.body.style.overflow = '';
        // 隐藏菜单
        fullscreenMenu.style.opacity = '0';
        fullscreenMenu.style.transform = 'translateX(-100%)';
        // 添加延迟以便过渡效果完成后再隐藏元素
        setTimeout(() => {
          if (!this.menuOpen) { // 再次检查状态，防止用户快速点击
            fullscreenMenu.style.visibility = 'hidden';
          }
        }, 300); // 300ms 应该足够过渡效果完成
      }
    },

    // 添加新方法：切换子菜单的显示/隐藏
    toggleSubMenu(event) {
      const menuToggle = event.currentTarget;
      const menuItem = menuToggle.closest('.menu-item, .submenu-item');
      const submenu = menuItem.querySelector('.submenu');

      if (submenu) {
        // 切换当前菜单项的展开状态
        menuItem.classList.toggle('expanded');

        // 设置子菜单的高度动画
        if (menuItem.classList.contains('expanded')) {
          submenu.style.height = submenu.scrollHeight + 'px';
          menuToggle.classList.add('active');
        } else {
          submenu.style.height = '0';
          menuToggle.classList.remove('active');
        }
      }
    },
    getLogoUrl() {
      this.logoUrl = JSON.parse(localStorage.getItem("homeDataPc"))['logoUrl'];
    },
    getHomeIndex() {
      this.$axios.get("/api/pc/home/index").then(res => {
        localStorage.setItem("homeDataPc", JSON.stringify(res.data));
      })
    },
    carCount() {
      this.$axios.get("/api/front/cart/count?numType=true&type=total").then(res => {
        this.$store.commit('cartNum', res.data.count);
      })
    },
    /**
     *
     * 语言切换
     */
    languagelTab(n) {
      this.$i18n.locale = n;
      this.$cookies.set('locale', n)
      this.$store.commit('SET_LANG', n)
    },
    /**
     *
     * 退出登录
     */
    async longOut() {
      let val = this.$cookies.get('auth.strategy')
      await this.$auth.logout().then(res => {
        this.$store.commit('cartNum', 0);
        window.localStorage.clear();
        this.$router.replace({
          path: '/'
        })
      })
    },
    //跳入移动商城地址
    go(url) {
      window.open('https://h5.et.crmeb.xbdzz.cn');
    },
    // 商品分类
    goCate(items) {
      this.cid = items.id
      this.$router.push({
        path: '/goods/goods_search',
        query: {
          cid: items.id,
          title: this.search ? this.search.trim() : ''
        }
      });
      // 关闭菜单
      if (this.menuOpen) {
        this.toggleMenu();
      }
    },
    /**
     *
     * 商户入驻
     */
    goMerSettled() {
      this.$router.push({
        path: `/users/merchant_settled`,
        query: { menuCur: 70 }
      });
    },
    goPage(menu) {
      this.$router.push({
        path: `${menu.pc_url}`,
        query: { menuCur: menu.id }
      });
    },
    /**
     *
     * 获取菜单
     */
    getMenus() {
      this.$axios.get("/api/front/user/menu/user").then(res => {
        // 如果 API 返回的数据结构与您提供的不同，可以在这里进行转换
        if (res.data && res.data.routine_my_menus) {
          this.menus = res.data.routine_my_menus;
        } else if (res.data && Array.isArray(res.data)) {
          // 如果直接返回数组，则直接使用
          this.menus = res.data;
        }

        // 确保每个菜单项都有 pc_url 属性，用于路由导航
        this.processMenuUrls(this.menus);
      })
    },
    processMenuUrls(menus) {
      if (!menus || !Array.isArray(menus)) return;

      menus.forEach(menu => {
        // 如果没有 pc_url，则设置默认值
        if (!menu.pc_url) {
          menu.pc_url = '/goods/goods_search?cid=' + menu.id;
        }

        // 递归处理子菜单
        if (menu.childList && Array.isArray(menu.childList)) {
          this.processMenuUrls(menu.childList);
        }
      });
    },
    longin() {
      this.$store.commit("isLogin", true);
      this.$store.commit("isTourists", false);
    },
    getHotSearchList() {
      this.$axios.get("/api/front/search/keyword").then(res => {
        this.hotSearchList = res.data || [];
      })
    },
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      if ($nuxt.$route.path == '/' && scrollTop > 120) {
        this.navBarFixed = true;
        this.hide = false;
      } else if ($nuxt.$route.path == '/' && scrollTop < 120) {
        this.navBarFixed = false;
        this.hide = true;
      } else if ($nuxt.$route.path !== '/' && scrollTop > 120) {
        this.navBarFixed = true;
      } else if ($nuxt.$route.path !== '/' && scrollTop < 120) {
        this.navBarFixed = false;
      }
    },
    AddFavorite() {
      let url = window.location;
      let title = document.title;
      let ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("360se") > -1) {
        this.$message(this.$t(`message.tips.browser`));
      }
      else if (ua.indexOf("msie 8") > -1) {
        window.external.AddToFavoritesBar(url, title); //IE8
      }
      else if (document.all) {
        try {
          window.external.addFavorite(url, title);
        } catch (e) {
          this.$message(this.$t(`message.tips.nubrowser`));
        }
      }
      else if (window.sidebar) {

        this.$message(this.$t(`message.tips.nubrowser`));
      }
      else {
        this.$message(this.$t(`message.tips.nubrowser`));
      }
    },
    submit() {
      this.$router.push({
        path: '/goods/goods_search', query: {
          title: this.search ? this.search.trim() : '',
          cid: this.cid
        }
      });
    },
    handleClose() {
      this.dialogVisible = false
    },
    showLogin() {
      this.$store.commit("isLogin", true);
    },
    keyDown(e) {
      // this.submit()
    },
    enter(index) {
      this.seen = true;
      this.hide = true;
      this.current = index;
      this.categoryCurrent = this.$store.state.productClassify[index].childList;
    },
    leave() {
      if ($nuxt.$route.path == '/') {
        this.seen = false;
        this.hide = true
      } else {
        this.seen = false;
      }

    },
    show() {
      this.hide = !this.hide
    }
  }
}
</script>
<style lang="scss" scoped>
@media only screen and (max-width: 991px) {
    .site-header .header-main, .site-header .header-bottom {
        display: none !important;
    }
}
@media only screen and (max-width: 991px) {
    .site-header .header-mobile {
        display: block !important;
    }
}
.show-submenu {
  height: auto !important;
  overflow: visible !important;
}

/* 三级菜单样式 */
.third-level {
  padding-left: 20px !important;
}

.third-level a {
  color: #666 !important;
  font-size: 14px !important;
}
/* 重置菜单样式 */
#fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;

  &.active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
  }

  header {
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    .et-close {
      position: relative;
      display: block;
      width: 24px;
      height: 24px;
      cursor: pointer;

      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: transform 0.3s ease;
      }

      &:before {
        transform: translateY(-50%) rotate(45deg);
      }

      &:after {
        transform: translateY(-50%) rotate(-45deg);
      }

      &:hover {

        &:before,
        &:after {
          background-color: #E93323;
        }
      }
    }
  }


  /* 菜单列表 */
  .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
        width: 100%;
  }

  /* 菜单项 */
  .menu-item {
    margin-bottom: 15px;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    .menu-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    a {
      color: #333;
      font-size: 16px;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      flex: 1;
      transition: color 0.3s ease;

      &:hover {
        color: #E93323;
      }
    }

    &.active>.menu-item-header>a {
      color: #E93323;
      font-weight: bold;
    }

    .menu-toggle {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .toggle-icon {
        position: relative;
        width: 12px;
        height: 12px;

        &:before,
        &:after {
          content: '';
          position: absolute;
          background-color: #333;
          transition: transform 0.3s ease;
        }

        &:before {
          top: 50%;
          left: 0;
          width: 100%;
          height: 2px;
          transform: translateY(-50%);
        }

        &:after {
          top: 0;
          left: 50%;
          width: 2px;
          height: 100%;
          transform: translateX(-50%);
        }
      }

      &.active .toggle-icon:after {
        transform: translateX(-50%) rotate(90deg);
      }

      &:hover .toggle-icon:before,
      &:hover .toggle-icon:after {
        background-color: #E93323;
      }
    }
  }

  /* 子菜单 */
  .submenu {
    list-style: none;
    padding-left: 20px;
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    display: block;
    /* 确保子菜单是块级元素 */
    width: 100%;
    /* 确保子菜单占满整行 */
  }

  /* 展开的子菜单 */
  .menu-item.expanded>.submenu,
  .submenu-item.expanded>.submenu {
    height: auto;
    /* 会被 JS 动态设置为实际高度 */
  }

  /* 子菜单项 */
  .submenu-item {
    margin-bottom: 10px;
    display: block;
    width: 100%;


  }

  .submenu .submenu {
    padding-left: 15px;
    /* 减少嵌套子菜单的左边距 */
    margin-top: 5px;
    /* 添加一些顶部间距 */
  }

  @media (min-width: 992px) {

    #fullscreen-menu .menu-list,
    #fullscreen-menu .submenu {
      display: block !important;
      /* 强制块级显示，覆盖可能的 flex 或 grid 布局 */
      column-count: 1 !important;
      /* 确保没有多列布局 */
    }
  }
}

/* 响应式样式 */
@media (min-width: 768px) {
  #fullscreen-menu {
    .container {
      max-width: 720px;
    }

    .menu-item>.menu-item-header>a {
      font-size: 18px;
    }

    .submenu-item a {
      font-size: 16px;
    }

    .submenu .submenu .submenu-item a {
      font-size: 14px;
    }
  }
}

@media (min-width: 992px) {
  #fullscreen-menu {
    .container {
      max-width: 960px;
    }

    .menu-list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -15px;
    }

    .menu-item {
      padding: 0 15px;
      box-sizing: border-box;
    }
  }
}

@media (min-width: 1200px) {
  #fullscreen-menu {
    .container {
      max-width: 1140px;
    }
  }
}

@media (min-width: 1490px) {
  #fullscreen-menu {
    .container {
      max-width: 1400px;
      padding: 0 40px;
    }
  }
}

/* 固定导航栏样式 */
.header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.header-spacer {
  height: 80px;
  /* 根据实际导航栏高度调整 */
}
</style>

<style>
@import '../assets/css/8ifkp(4).css';

/* 响应式容器 */
@media (min-width: 1490px) {

  .header-full-width:not(.checkout-distraction-free) .top-bar .container,
  .header-full-width:not(.checkout-distraction-free) .site-header .container,
  .header-full-width .et-header-menu>li.menu-item-mega-parent>.sub-menu {
    padding-right: 40px;
    padding-left: 40px;
  }
}

/* 添加更大屏幕宽度的媒体查询 */
@media (min-width: 1900px) {
  .container {
    max-width: 1800px !important;
  }

  .header-full-width:not(.checkout-distraction-free) .site-header .container {
    max-width: none !important;
    padding-right: 40px;
    padding-left: 40px;
  }
}

/* 修改导航栏样式，默认不固定，只在滚动时固定 */
.header-full-width .site-header {
  position: relative;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 滚动时固定导航栏的样式 */
.site-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 为固定导航栏下的内容添加上边距，防止内容被导航栏遮挡 */
.site-header.fixed+.header-spacer {
  display: block;
  height: 80px;
}

.header-spacer {
  height: 80px;
}

/* 移动端样式优化 */
@media (max-width: 767px) {
  .header-mobile .hamburger-menu {
    margin-right: 10px;
  }

  .header-mobile .logo-holder img {
    max-height: 40px;
  }

  .header-mobile .mobile-header-icons {
    margin-left: 10px;
  }

  #fullscreen-menu .mobile-menu>.menu-item>a {
    font-size: 16px;
    padding: 12px 0;
  }

  #fullscreen-menu .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
</style>
<style>
@import '../assets/css/8ifkp(4).css';
@media (min-width: 1490px) {

  .header-full-width:not(.checkout-distraction-free) .top-bar .container,
  .header-full-width:not(.checkout-distraction-free) .site-header .container,
  .header-full-width .et-header-menu>li.menu-item-mega-parent>.sub-menu {
    padding-right: 40px;
    padding-left: 40px;
  }
}

/* 添加更大屏幕宽度的媒体查询 */
@media (min-width: 1900px) {
  .container {
    max-width: 1800px !important;
  }

  .header-full-width:not(.checkout-distraction-free) .site-header .container {
    max-width: none !important;
    padding-right: 40px;
    padding-left: 40px;
  }
}

/* 修改导航栏样式，默认不固定，只在滚动时固定 */
.header-full-width .site-header {
  position: relative;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: position 0.3s ease;
}

/* 滚动时固定导航栏的样式 */
.site-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff !important;
  /* 强制使用白色背景 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 为固定导航栏下的内容添加上边距，防止内容被导航栏遮挡 */
.site-header.fixed+.header-spacer {
  display: block;
  height: 80px;
  /* 根据您的导航栏高度调整 */
}

.header-spacer {
  height: 80px;
  /* 根据您的导航栏高度调整 */
}
</style>
